﻿<div class="layui-card" id="lg-mda-info">
    <div class="layui-card-header">
        <i class="fa fa-home fa-fw"></i>媒体详情
        <div class="f-r">
            <button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="back()"><i class="fa fa-mail-reply fa-fw"></i>返回</button>
            <button class="layui-btn layui-btn-sm" v-on:click="switchPanel(0)" title="编辑"><i class="fa fa-pencil-square-o fa-fw"></i>编辑</button>
        </div>
    </div>
    <div class="layui-card-body" id="">
        <blockquote class="layui-elem-quote">{{model.Title}}</blockquote>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>访问记录</legend>
        </fieldset>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="onExport"><i class="fa fa-file-excel-o fa-fw"></i>导出</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="GetViewHistoryList"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th style="width:60px">序号</th>
                            <th style="width:120px">流水号</th>
                            <th>UserAgent</th>
                            <th style="width:120px">IP</th>
                            <th style="width:120px">时间</th>
                            <th style="width:60px">转化</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in table.data">
                            <td>{{index+1}}</td>
                            <td>{{row.SN}}</td>
                            <td>{{row.UserAgent}}</td>
                            <td>{{row.IP}}</td>
                            <td>{{row.AddTime}}</td>
                            <td style="text-align:center">
                                <i :style="{color:row.IsSign==1?'green':'red'}" :class="['fa',{'fa-check':row.IsSign==1},{'fa-close':row.IsSign==0}]"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="!table.data||table.data.length==0||table.loading">
                    <p v-if="!table.loading">没有数据 ~</p>
                    <p v-if="table.loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-mda-viewRecords" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
    <div>
        <div :class="['popupShadow',{'act':panel[0]}]" v-on:click="switchPanel(0)"></div>
        <div :class="['popupContainer-right',{'act':panel[0]}]" style="width:500px">
            <div class="popupTitle">
                <h3><i class="fa fa-cog fa-fw" aria-hidden="true"></i>控制面板</h3>
                <span class="fa fa-angle-right" v-on:click="switchPanel(0)"></span>
            </div>
            <div class="popupContent">
                <form class="layui-form layui-form-pane" action="" id="fm_EditMCode" lay-filter="fm_EditMCode">
                    <div class="layui-form-item hide">
                        <label class="layui-form-label"><i style="color:#f00">*</i>名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="Id" class="layui-input" placeholder="填写名称" lay-verify="required" readonly/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="Title" class="layui-input" placeholder="填写名称" lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea placeholder="填写描述" name="Intro" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>目标地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="LinkUrl" class="layui-input" placeholder="目标地址" lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">是否启用</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="IsUsing" value="1" lay-skin="switch" lay-filter="IsUsing" lay-text="ON|OFF">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block text-center">
                            <button class="layui-btn" lay-submit lay-filter="bt_EditMCode">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="module">
    var page = frame.createPage({
        mounted: function () {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        model: {
                            Id: @ViewBag.id,
                        },
                        form: {
                            options: [],
                            data: {}
                        },
                        table: {
                            cols: [],
                            checked: [],
                            data: [],
                            where: {
                                page: 1,
                                limit: 10
                            },
                            loading: false
                        },
                        panel: [false, false]
                    }
                },
                mounted: async function () {
                    this.layInit();
                   var res=await this.GetCodeModel();
                   if(res.code==0){
                       this.GetViewHistoryList();
                   }
                },
                methods:{
                    layInit:function(){
                        var that=this;
                        layui.form.on("submit(bt_EditMCode)",function(data){
                            that.postEditMcode(data.field);
                            return false;
                        })
                    },
                    GetCodeModel: async function () {
                        return await lg.requestAsync({
                            url: "/api/sys/media/GetMcode",
                            data: { id: this.model.Id }
                        }).then(res => {
                            if (res.code == 0) {
                                this.model = res.data;
                                this.form.data = lg.obj.copy(res.data);
                                this.table.where.MCodeSN = res.data.SN;
                            } else {
                                layer.msg(res.msg, { icon: 2 })
                            }
                            return res;
                        })
                    },
                    GetViewHistoryList:function(){
                        lg.request({
                            url: "/api/sys/media/GetViewHistoryList",
                            data: this.table.where,
                            success: res => {
                                if (res.code == 0) {
                                    this.table.data=res.data;
                                    this.setPage(res.count)
                                }else{
                                    layer.msg(res.msg,{icon:2})
                                }
                            }
                        })
                    },
                    postEditMcode:function(data){
                        if(data.IsUsing==undefined){
                            data.IsUsing=0;
                        }
                        lg.request({
                            url:"/api/sys/media/editMcode",
                            data:data,
                            method:"post",
                            success:res=>{
                                if(res.code==0){
                                    this.form.data = lg.obj.copyData(this.form.data,data);
                                    this.model = lg.obj.copyData(this.model, data);
                                    this.switchPanel(0);
                                }else{
                                    layer.msg(res.msg,{icon:2})
                                }
                            }
                        })
                    },
                    setPage: async function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-mda-viewRecords'
                            , curr: that.table.where.page
                            , limit: that.table.where.limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.table.where.page = obj.curr;
                                    that.table.where.limit = obj.limit;
                                    that.GetViewHisoryList();
                                }
                            }
                        });
                    },
                    onExport:function(){
                        lg.getFile({
                            url: "/api/sys/media/ExportViewHistory?sn="+this.model.SN,
                            fileName: "访问数据-" + lg.GetDate("yyyyMMddHHmmss"),
                            data: this.table.where
                        });
                    },
                    switchPanel: function (index, state) {
                        if (state == undefined) {
                            this.panel[index] = !this.panel[index];
                        } else {
                            this.panel[index] = state
                        }
                        if(index==0){
                            layui.form.val("fm_EditMCode",this.form.data);
                        }
                    },
                    back: function () {
                        frame.Back(page.url, res => {
                            res.reload();
                        })
                    },
                }
               
            })          
            this.vm = app.mount("#lg-mda-info");
        }
    }).mount();
</script>